<template>
  <view>
    <view class="user-payment">
      <!-- 充值 -->
      <form report-submit="true">
        <view class="payment bg-white">
          <view class="md normal flex" style="padding: 66rpx 66rpx 0">
            <!-- 余额互转 -->
          </view>
          <view class="input">
            <view class="text">互转余额</view>
            <input :placeholder="placeholder" type="digit" @focus="setPlaceholder" @blur="setPlaceholderStatus"
              :value="number" @input="onInput" />
          </view>
          <view class="input">
            <view class="text">用户ID</view>
            <u-input v-model="value1" type="number" :border="border" placeholder="请输入对方用户id" class="input-txt" />
          </view>
          <view class="input">
            <view class="text">支付密码</view>
            <u-input v-model="value2" type="text" :border="border" placeholder="请输入支付密码" class="input-txt" />
          </view>
          <view class="tip muted m-t-20 flex">
            提示：当前余额为
            <text class="primary">￥{{ wallet.user_money || 0 }}</text>
          </view>
        </view>
        <button size="lg" class="btn white br60 blue" @tap="handleClickBalanceTransfer" :loading="loading">
          确定互转
        </button>
      </form>
    </view>
  </view>
</template>

<script>

import {
  rechargeTemplate,
  recharge,
  getWallet,
  getRechargeRecordDetail,
  balanceTransfer
} from '@/api/user';
import {
  prepay
} from '@/api/app';
import {
  wxpay
} from '@/utils/pay';

export default {
  data() {
    return {
      type1: 'number',
      number: '',
      value1: null,
      value2: null,
      placeholder: "0.00",
      wallet: {},
      showLoading: false,
      border: false,
      loading: false
    };
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getWalletFun();
  },

  onUnload() {
    uni.$off('payment')
  },

  methods: {
    handleClickBalanceTransfer() {
      if (!this.number) {
        return this.$toast({
          title: '请输入金额'
        })
      } else if (!this.value1) {
        return this.$toast({
          title: '请输入对方用户id'
        }) 
      } else if (!this.value2) {
        return this.$toast({
          title: '请输入支付密码'
        }) 
      }
      let obj = {
        money: Number(this.number),
        sn: this.value1,
        pay_password: this.value2,
      }
      balanceTransfer(obj).then(res => {
        console.log(res);
        if (res.code != 1) {
            this.$toast({
            title: res.msg
          })
          return;
        }
        this.$toast({
          title: '余额互转成功'
        });
         setTimeout(() => {
           uni.reLaunch({
             url: `/bundle/pages/user_wallet/user_wallet`
           })
         })
      });
    },
    setPlaceholderStatus: function (event) {
      if (event.detail.value.length == 0) {
        this.placeholder = '0.00'
      }
    },
    setPlaceholder: function () {
      this.placeholder = ''
    },

    getWalletFun() {
      getWallet().then(res => {
        if (res.code == 1) {
          this.wallet = res.data
        }
      });
    },
    checkInputText: function (text) {
      var reg = /^(\.*)(\d+)(\.?)(\d{0,2}).*$/g;

      if (reg.test(text)) {
        //正则匹配通过，提取有效文本
        text = text.replace(reg, '$2$3$4');
      } else {
        //正则匹配不通过，直接清空
        text = '';
      }

      return text; //返回符合要求的文本（为数字且最多有带2位小数）
    },

    onInput(e) {
      let number = e.detail.value;
      number = this.checkInputText(number);
      this.number = number
    }
  }
};
</script>
<style lang="scss">
.user-payment {
  padding: 20rpx 30rpx;

  .payment {
    text-align: center;
    border-radius: 20rpx;
    overflow: hidden;
    padding-bottom: 74rpx;

    .nav {
      margin: 20rpx 95rpx 80rpx;

      .item {
        flex: 1;

        .line {
          width: 110rpx;
          height: 2px;
        }
      }
    }

    .line {
      width: 110rpx;
      height: 2px;
    }

    .input {
      margin-left: 66rpx;
      margin-top: 35rpx;
      margin-right: 30rpx;

      input {
        height: 94rpx;
        text-align: left;
        font-size: 40rpx;
        // margin-left: 30rpx;
      }

      border-bottom: $-solid-border;
    }

    .tip {
      margin: 25rpx 66rpx;
    }

  }

  .btn {
    background: linear-gradient(79deg, rgb(113, 115, 221) 0%, rgb(49, 35, 245) 100%);
    margin: 70rpx 0 30rpx;
  }

  .fast-payment-container {
    margin-top: 72rpx;

    .title {
      font-size: 38rpx;
      line-height: 53rpx;
    }

    .fast-pay {
      margin-top: 40rpx;

      .fast-pay-item {
        position: relative;
        width: 214rpx;
        height: 150rpx;
        border-radius: 10rpx;
        margin-bottom: 16rpx;

        &:not(:nth-of-type(3n)) {
          margin-right: 24rpx;
        }

        .hot-recharge {
          position: absolute;
          padding: 2rpx 10rpx;
          height: 30rpx;
          background: linear-gradient(180deg, #FF2C3C 0%, #F95F2F 100%);
          border-radius: 0 20rpx 0 20rpx;
          font-size: 20rpx;
          top: 0;
          right: 0;
        }

        .price {
          font-size: 42rpx;
          line-height: 50rpx;
        }

        .preferential {
          line-height: 32rpx;
        }
      }

    }
  }
}

.pay-popup {
  .content {
    padding: 40rpx 0;
    text-align: center;
    width: 560rpx;
    border-radius: 20rpx;
  }

  .img-icon {
    width: 112rpx;
    height: 112rpx;
    display: inline-block;
  }

  .btn {
    margin: 80rpx 60rpx 0;
  }
}

.text {
  text-align: left;
  color: #2979FF;
  font-weight: 600;
  font-size: 30rpx;

}

.input-txt {
  font-size: 48rpx;
}

::v-deep .uni-input-input {
  font-size: 40rpx;
}

::v-deep .u-input__input::placeholder {
  color: #999;
  /* 示例颜色 */
  font-size: 40rpx;
  /* 示例字体大小 */
}
</style>
